import React, { Component } from 'react'
import { Modal, Form, Input, Select, DatePicker } from 'antd'
import moment from 'moment'

const FormItem = Form.Item
const Option = Select.Option

// 处理参数（主要格式化时间）
const handleFields = (fields) => {
  const { userBirth } = fields
  if (userBirth) {
    fields['userBirth'] = moment(userBirth).format('YYYY-MM-DD')
  }
  return fields
}

// 编辑弹窗
class EditModal extends Component {
	constructor (){
		super()
		this.state = {
			isShow: false,
		}
	}
	// 显示弹层
	showModal = () => {
		this.setState({ isShow: true })
  }
  // 隐藏弹层
  hideModal = () => {
    this.setState({ isShow: false })
  }
  // 点击确定事件
	okHandler = () => {
    const { onOk } = this.props
    const { getFieldsValue } = this.props.form
    this.props.form.validateFields((err) => {
      if (!err) {
        let fields = getFieldsValue()
        fields = handleFields(fields)
        onOk(fields)
        this.hideModal()
      }
    })
	}
  // 点击取消事件
	cancelHandler = (e) => {
		e.preventDefault()
		this.hideModal()
	}
 
	render () {
    const { children } = this.props  // 通过props获取本组件被包裹的元素
		const { getFieldDecorator } = this.props.form  //通过this.props可以获得antd提供的form
    const { userName, userSex, userAge, userBirth, address } = this.props.record

		let formItemLayout = {
			labelCol: { span: 6 },
			wrapperCol: { span: 14 },
		}
		return (
      <div>
        <span onClick={this.showModal}>
          {children}
        </span>
        <Modal title="填写"
          visible={this.state.isShow}    //控制弹层组件Modal的显隐
          onOk={this.okHandler}          //Modal确定
          onCancel={this.cancelHandler}  //Modal取消
        >
          <Form onSubmit={this.submitFun}>
            <FormItem label="姓名" {...formItemLayout}>
              {getFieldDecorator('userName', {
                initialValue: userName,
              })(
                <Input placeholder="请输入用户名" />
              )}
            </FormItem>
            <FormItem label="性别" {...formItemLayout}>
              {getFieldDecorator('userSex', {
                initialValue: ( userSex === '1'? '男': userSex === '2'? '女': '' ),
              })(
                <Select onChange={this.handleSex}>
                  <Option value="1">男</Option>
                  <Option value="2">女</Option>
                </Select>
              )}
            </FormItem>
            <FormItem label="年龄"{...formItemLayout}>
              {getFieldDecorator('userAge', {
                initialValue: userAge,
                rules: [{
                  pattern: /^\+?[1-9][0-9]*$/, message: '请输入数值！', trigger: 'onBlur',
                }],
                })(
                  <Input placeholder="请输入年龄" />
                )}
              </FormItem>
            <FormItem label="生日" {...formItemLayout}>
              {getFieldDecorator('userBirth', {
                initialValue: ( userBirth? moment(`${userBirth}`) : userBirth ),
              })(
                <DatePicker format="YYYY-MM-DD" />
              )}
            </FormItem>
            <FormItem label="地址" {...formItemLayout}>
              {getFieldDecorator('address', {
                initialValue: address,
              })(
                <Input />
              )}
            </FormItem>
          </Form>
        </Modal>
      </div>
		)
	}
}
/** 
 * 用 Form.create()(组件) 包裹的组件会带有form属性
 * 用es6形式创建的组件 可以用this.props拿到form
 * 而无状态的函数式组件 则在函数的参数里得到form
 */
export default Form.create()(EditModal)